<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jquery01</title>
	<meta name="author" content="Stark" />
	<!-- Date: 2018-10-23 -->
	<style type="text/css">
		.bg {
			background: #f00;
			color: #fff;
		}
	</style>
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<script type="text/javascript">
		$(function(){
			// 目前是一个JavaScript的对象，对于该对象而言，不能使用jquery的方法
			var hello = document.getElementById("hello");
			// hello.css("color","#f00");		是js对象，不能使用jQuery对象
			// 使用$(xxx)可以帮xxx这个节点封装为jquery对象
			$(hello).css("color","#f00");
			// 每一个jQuery节点都是一个数组，只要取出数组中得值，这个值就是js的节点，只能用js的方法
			// 当转换为js节点之后，就无法使用jQuery的方法，如果要使用需要通过$(xxx)封装
			($("li.abc")[0]).innerHTML="asdsadsadad";
			var lis = $("#hello ul li");
			for(var i=0;i<lis.length;i++) {
				// 目前的li是js的节点
				var li = lis[i];
				// li.innerHTML = "["+(i+1)+"]"+li.innerHTML;
				// $(li)就变成了jquery节点
				// xx.html()读取内容
				$(li).html((i+1)+"."+$(li).html());
			}
		});
	</script>
</head>
<body>
<div id="hello">
	<ul>
		<li>aaaaaaaaaaaaa</li>
		<li>bbbbbbbbbbbbb</li>
		<li class="abc">vvvvvvvvvvvvv</li>
		<li>ccccccccccccc</li>
		<li>ddddddddddddd</li>
	</ul>
</div>
</body>
</html>

